<template>
	
	<!-- 首页导航栏 -->
			<view class="uni-tab-bar">
				<scroll-view scroll-x class="uni-swiper-tab">
		
					<block  v-for='(item,index) in tabBars' :key='index'>
						
						
						<!-- 绑定事件 @tap   -->
						<view class="swiper-tab-list"
						:class="{'active':tabIndex==index}" 
						@tap='changeTab(index)'
						>
						 {{item.name}}
							<view class="swiper-tab-line"></view>
						</view>
						
											 
											
					</block>
										
								
				
				</scroll-view>
			</view>
	
	
</template>

<script>
	
	
	export default  {
		props:{
			tabBars:Array,
			tabIndex:Number
			
		},
		
		methods:{
			changeTab(index) {
				//子组件像父组件传递数据 
				this.$emit('ToChangeTab',index)
			 
				},
		}
	}
</script>

<style>
	
	
	.uni-swiper-tab{
				border-bottom: 1upx solid #EEEEEE;
			}
			.swiper-tab-list{
				color: #969696;
				font-weight: bold;
			}
			.uni-tab-bar .active{
				color: #343434;
			}
			.active .swiper-tab-line{
				border-bottom: 6upx solid #FEDE33;
				width: 70upx;
				margin: auto;
				border-top: 6upx solid #FEDE33;
				border-radius:20upx;
			}
	
	
</style>
